import React, {Component, useState, useEffect} from 'react';
import {Radar, RingProgress} from '@ant-design/plots';
import {Button, Card, Col, Form, Input, Row, Space} from "antd";
import ScoreLineCharts from "@/pages/dashboard/components/ScoreLineCharts";
import SchoolLists from "@/pages/dashboard/components/SchoolLists";
import useAuthModel from "@/models/useAuthModel";
import Demo20 from "@/pages/dashboard/Progress/Demo20";
import '../font.css'
import {history} from "umi";

const DemoRadar = (props) => {
  const data = props.data
  const config = {
    data,
    width: 230,
    height: 320,
    padding: 50,
    legend: false,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
    meta: {
      score: {
        alias: '分数',
        min: 0,
        max: 100,
      },
    },
    xAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null,
          },
        },
      },
    },
    // 开启面积
    area: {},
    // 开启辅助点
    point: {
      size: 2,
    },
    yAxis: {
      label: {
        style: {
          fontSize: 12
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Radar {...config} />;
};
const SearchModule = (props) => {

  const {onFilterName} = props

  return (
    <Form
      name="basic"
      layout="inline"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      initialValues={{remember: true}}
      onFinish={(values) => {
        onFilterName(values.keyword)
      }}
      autoComplete="off"
    >
      <Space>
        <Form.Item
          name="keyword"
        >
          <Input style={{width: 163}} name="searchValue" placeholder="请输入关键字"/>
        </Form.Item>
        <Button
          type="primary"
          htmlType="submit"
        >
          搜索
        </Button>
        <Button
          type="default"
          onClick={() => {
            onFilterName("")
          }}
        >
          全部
        </Button>
      </Space>
    </Form>
  )
}

class RadarCharts extends Component {

  state = {
    school: {
      name: "南昌大学-材料科学与工程",
      code: "0001",
      data: [
        {
          "item": "学科建设",
          "user": '2021',
          "score": 72
        },
        {
          "item": "学科建设",
          "user": '2022',
          "score": 96
        },
        {
          "item": "创新人才",
          "user": '2021',
          "score": 77
        },
        {
          "item": "创新人才",
          "user": '2022',
          "score": 98
        },
        {
          "item": "师资队伍",
          "user": '2021',
          "score": 73
        },
        {
          "item": "师资队伍",
          "user": '2022',
          "score": 90
        },
        {
          "item": "科学研究",
          "user": '2021',
          "score": 73
        },
        {
          "item": "科学研究",
          "user": '2022',
          "score": 98
        },
        {
          "item": "社会服务",
          "user": '2021',
          "score": 73
        },
        {
          "item": "社会服务",
          "user": '2022',
          "score": 90
        },
      ],
    },
    student: [
      {
        type: '本科',
        value: 2227,
      },
      {
        type: '硕士研究生',
        value: 725,
      },
      {
        type: '博士研究生',
        value: 125,
      },
    ],
    filterName: "",
    name: history.location.query.name
  }

  handleSchoolFilter = (schoolName: string) => {
    this.setState({filterName: schoolName})
  }

  handleSchoolChange = (schoolName: string) => {
    const {school, student} = this.state
    school.name = schoolName
    for (let i = 0; i < school.data.length; i++) {
      school.data[i].score = parseInt(String(Math.random() * (40 - 100) + 100))
    }
    for (let i = 0; i < student.length; i++) {
      if (student[i].type === '本科') {
        student[i].value = parseInt(String(Math.random() * (500 - 1000) + 1000))
      } else if (student[i].type === '硕士研究生') {
        // @ts-ignore
        student[i].value = parseInt(Math.random() * (30 - 150) + 150)
      } else {
        student[i].value = parseInt(String(Math.random() * (10 - 100) + 100))
      }
    }
    this.setState({school: school, student: student})
  }

  render() {
    return (
      <>
        <Space direction="vertical" size="middle" style={{display: 'flex'}}>
          {/*学科进展表格2样式*/}
          <Card title="一流学科综合考评" bordered={false}>
            <Row gutter={24}>
              <Col span={6}>
                <Space direction="vertical" size="middle" style={{display: 'flex'}}>
                  <SchoolLists defaultValue={this.state.name} filterName={this.state.filterName} onSchoolChange={this.handleSchoolChange}/>
                </Space>
              </Col>
              <Col span={8}>
                <Card headStyle={{fontWeight: 'bold'}} className='finish' title={this.state.school.name } size="small" bordered={true}
                      style={{marginBottom: 10}}>
                  <DemoRadar data={this.state.school.data}/>
                </Card>
              </Col>
              <Col span={10}>
                <Card headStyle={{fontWeight: 'bold'}} className='finish' title={this.state.school.name } size="small" bordered={true}
                      style={{marginBottom: 10}}>
                  <Demo20 data={this.state.student}/>
                </Card>
              </Col>
              {/*<Col span={8}>*/}
              {/*  <Space direction="vertical" size="middle" style={{display: 'flex'}}>*/}
              {/*    <ScoreLineCharts/>*/}
              {/*  </Space>*/}
              {/*</Col>*/}
            </Row>
          </Card>
        </Space>
      </>
    );
  }
}

export default RadarCharts;
